<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计算器</title>
		<link rel="stylesheet" href="../css/index.css">
	</head>
	<body>
		<div class="main">
			<div class="display">
				<div class="line" id="first-line">

				</div>
				<div class="line" id="second-line">
				</div>
			</div>
			<div class="btn">
				<table border="" class="table">

					<tr>
						<td class="other btm" data-value="AC">AC</td>
						<td class="other btm" id="abs">+/-</td>
						<td class="other btm" id="percentage">%</td>
						<td class="step btm" data-value="/">/</td>
					</tr>
					<tr>
						<td class="num btm" data-value="7">7</td>
						<td class="num btm" data-value="8">8</td>
						<td class="num btm" data-value="9">9</td>
						<td class="step btm" data-value="*">×</td>
					</tr>
					<tr>
						<td class="num btm" data-value="4">4</td>
						<td class="num btm" data-value="5">5</td>
						<td class="num btm" data-value="6">6</td>
						<td class="step btm" data-value="-">-</td>
					</tr>
					<tr>
						<td class="num btm" data-value="1">1</td>
						<td class="num btm" data-value="2">2</td>
						<td class="num btm" data-value="3">3</td>
						<td class="step btm" data-value="+">+</td>
					</tr>
					<tr>
						<td colspan="2" class="num btm" data-value="0">0</td>
						<td class="num btm" data-value=".">.</td>
						<td class="step btm" data-value="=">=</td>
					</tr>
				</table>
			</div>
		</div>
		<script type="text/javascript">
			var btm = document.getElementsByClassName('btm')
			var persimmom = "";
			var result = '';
			var back = ''
			var firstLine = document.getElementById('first-line')
			var secondLine = document.getElementById('second-line')
			var percentage = document.getElementById('percentage')
            var abs = document.getElementById('abs')
			var handleClick = function(value) {
				
				if (value == null) {
					return
				} else {
					if (value == '=') {
						result = eval(persimmom);
						secondLine.innerHTML = result;
						 back  = persimmom
						persimmom = '';
						return
					} else {
						persimmom = persimmom + value;
					}
				}
				firstLine.innerHTML = persimmom;
				if (value == 'AC') {
					persimmom = ''
					result = ''
					firstLine.innerHTML = ''
					secondLine.innerHTML = 0
				}
			}
			for (var i = 0; i < btm.length; i++) {
				btm[i].addEventListener('click', function() {
					var dataValue = this.getAttribute('data-value')
					handleClick(dataValue);
				})
			}
			percentage.addEventListener("click", function(e) {
				result = parseFloat(result) / 100
				secondLine.innerHTML = result
			})
			abs.addEventListener('click',function(){
				console.log(result)
				result =  -result 
				secondLine.innerHTML = result
				console.log(result)
			})
            </script>
	</body>
</html>